<template>
  <div ref="chart" style="width: 600px;height: 400px;"></div>
</template>
<script>
// import echarts from "echarts";
import * as echarts from 'echarts';//echarts5的引入方式

export default {
  data() {
    return {}
  },
  mounted() {
    this.myShow()
  },
  methods: {
    myShow() {
      var myChart = echarts.init(this.$refs.chart)
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '贷款季度数据'
        },
        tooltip: {},
        legend: {
          data: ['数额']
        },
        xAxis: {
          data: ['第一季度', '第二季度', '第三季度', '第四季度']
        },
        yAxis: {},
        series: [
          {
            name: '数额',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。

      // var option = {
      //   title: {
      //     text: '贷款季度数据'
      //   },
      //   tooltip: {},
      //   legend: {
      //     data: ['数额']
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [
      //     {
      //       data: [120, 200, 150, 80, 70, 110, 130],
      //       type: 'bar',
      //       showBackground: true,
      //       backgroundStyle: {
      //         color: 'rgba(180, 180, 180, 0.2)'
      //       }
      //     }
      //   ]
      // };
      myChart.setOption(option)
    }
  },
}
</script>
<style scoped lang="less">

</style>
